Motivation

MUI v6 deprecated system props on its components, instructing consumers to migrate to sx instead: https://mui.com/material-ui/migration/migrating-from-deprecated-apis/#system-props

We have some MUI Dart wrappers that should be migrated, that their existing codemod won't work for.

Changes

• Add mui_system_props_migration codemod executable, which migrates system props to sx
  • Detects usages of OverReact props that wrap MUI components regardless of where they're defined (duck-typing them by looking for sx and deprecated system props)
    • This allows us to run tests in CI in this OSS repo, and had the bonus of automatically handling the Link component I originally missed
  • Handles edge cases of existing sx props and prop forwarding, merging them while preserving existing behavior as best as possible
    • Most cases are handled automatically, but some require manual intervention and will get a FIXME comment with context on how to address
• Add tests

Example migration

Before (system props):

(Box()..m = 2)();
(Box()
  ..m = 2
  ..sx = {'color': '#f00'}
)()
(Box()
  ..m = 2
  ..addProps(props.getPropsToForward())
)()

After (all system props migrated to SX):

(Box()..sx = {'m': 2})()
(Box()..sx = {
  'm': 2,
  'color': '#f00'
})()
(Box()
  ..addProps(props.getPropsToForward())
  ..sx = {
    'm': 2,
    ...?props.sx,
  }
)()

Release Notes

Review

See CONTRIBUTING.md for more details on review types (+1 / QA +1 / +10) and code review process.

Please review:

QA Checklist

• Tests were updated and provide good coverage of the changeset and other affected code
• Manual testing was performed if needed
  • Steps from PR author:
    • Verify tests run in CI and pass
    • Run the codemod locally on a few repos to make sure the codemod doesn't crash, and verify output looks good and FIXME comments show up where expected and make sense

      dart pub global activate --source=git --git-ref=system-sx-migrator https://github.com/Workiva/over_react_codemod
      mui_system_props_migration --yes-to-all
      ddev format
      

  • Anything falling under manual testing criteria outlined in CONTRIBUTING.md

Merge Checklist

While we perform many automated checks before auto-merging, some manual checks are needed:

• A Frontend Frameworks Design member has reviewed these changes
• There are no unaddressed comments - this check can be automated if reviewers use the "Request Changes" feature
• For release PRs - Version metadata in Rosie comment is correct